<template>
  <div class="block text-center">
    <el-carousel height="auto" autoplay>
      <el-carousel-item class="carousel-item" v-for="item in ImageData" :key="item.id">
        <img :src="item.src" alt="Description" class="picture" >
      </el-carousel-item>
    </el-carousel>
  </div>
</template>




<script>
import axios from 'axios'
import {ref,reactive,toRefs, onMounted} from 'vue'
import Dialog from "@/components/Dialog.vue";
  export default{
    name: "StoreBanner",
    setup(){
      const data = reactive({
        ImageData: [],
      })


      const getImg = async () =>{
      const response = await axios.get(
          'api/getImg/',
          {
            headers: {
              "Content-Type": "application/json;charset=utf-8",
              'X-Requested-With': 'XMLHttpRequest',
              'Access-Control-Allow-Origin': '*'
            }
          }
      )
      data.ImageData = response.data.title
    }


    onMounted(() => {
      getImg()
    })

      return{
        ...toRefs(data),
        getImg
      }
    },
    components: {
      Dialog
    }
  }


</script>

<style scoped>

* {
  margin: 0  !important;
  padding: 0  !important;
}


.carousel-item {
  height: 900px;
  width: 100%;
}


.picture{
  height: 100%; /* 确保高度自适应，以保持宽高比例 */
  width: 100%; /* 确保宽度自适应，以保持宽高比例 */
  object-fit: cover;
}


.el-main {
  margin: 0  !important;
  padding: 0  !important;
}


.text-center{
  height: 900px;
  width: 100%;
  margin-bottom: 50px;
}


@media(max-width: 1500px){
  .text-center {
    height: 300px;
    width: 100%;
  }

  .carousel-item {
  height: 300px;
  width: 100%;
  }

  .picture {
    height: auto;
    width: 100%;
  }
}
</style>
